<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>




    <style>
        #carousel-container {
            width: 500px;
            height: 332px;
            position: relative;
            margin: 50px auto 0;
            border: 10px solid #000;
            border-radius: 10px;
        }

        #carousel-container>div:first-child {
            /* overflow: hidden; */
            max-width: 100%;
            margin: 0;
        }

        #carousel {
            position: relative;
            width: 5000px;
            height: 332px;
            padding: 0;
            margin: 0;
            border: 1px solid red;
            left: -500px;
        }

        .animate {
            -webkit-transition-duration: .5s;
            -moz-transition-duration: .5s;
            -o-transition-duration: .5s;
            transition-duration: .5s;
            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            -o-transition-property: -o-transform;
            transition-property: transform;
        }

        img {
            width: 500px;
            height: 100%;
        }

        .slide {
            list-style: none;
            position: relative;
            float: left;
            transform: translateX(-500px)
        }

        #controls {
            position: absolute;
            width: 620px;
            top: calc(50% - 25px);
            margin: 0 -60px;
        }

        #controls span {
            width: 50px;
            cursor: pointer;
            opacity: 0.4;
        }

        #controls span:hover {
            opacity: 1;
        }

        #prev {
            float: left;
        }

        #next {
            float: right;
        }
    </style>
    <div id="carousel-container">
        <div>
            <ul id="carousel" class="animate">
                <li class="slide animate">
                    <img src="img/000.jpeg" />
                </li>
                <li class="slide animate">
                    <img src="img/111.jpeg" />
                </li>
                <li class="slide animate">
                    <img src="img/222.jpeg" />
                </li>
                <li class="slide animate">
                    <img src="img/333.jpeg" />
                </li>
                <li class="slide animate">
                    <img src="img/444.jpeg" />
                </li>
            </ul>
        </div>
        <div id="controls">
            <span id="prev"> <button> pre </button> </span>
            <span id="next"><button>next </button></span>
        </div>
    </div>



    <script>
        var index = 0,
            amount = 0,
            currTransl = [],
            translationComplete = true,
            moveOffset = 0;

        var transitionCompleted = function () {
            translationComplete = true;
        }

        document.addEventListener("DOMContentLoaded", function (event) {
            var carousel = document.getElementById('carousel');

            amount = document.getElementsByClassName("slide").length;    // 获取图片的数量
            moveOffset = parseInt(window.getComputedStyle(document.getElementById('carousel-container')).width, 10);  // get the width of the container
            console.log("moveOffset:  " + moveOffset);   // moveOffset:  500
            document.getElementById('carousel').style.width = (amount * moveOffset) + 'px';     // calcuate the width of the carousel
            // prevent multiple click when transition
            for (var i = 0; i < amount; i++) {
                currTransl[i] = -moveOffset;
                document.getElementsByClassName("slide")[i].addEventListener("transitionend", transitionCompleted, true);
                document.getElementsByClassName("slide")[i].addEventListener("webkitTransitionEnd", transitionCompleted, true);
                document.getElementsByClassName("slide")[i].addEventListener("oTransitionEnd", transitionCompleted, true);
                document.getElementsByClassName("slide")[i].addEventListener("MSTransitionEnd", transitionCompleted, true);
            }
            // add the last item to the start     把最后一张图片插入最前面
            // so that translateX(-moveOffset) works (In case the first click is the previous button)
            document.getElementById('carousel').insertBefore(document.getElementById('carousel').children[4], document.getElementById('carousel').children[0])
            // add click events to control arrows
            document.getElementById('prev').addEventListener('click', prev, true);
            document.getElementById('next').addEventListener('click', next, true);
        });

        function prev() {
            console.log(currTransl);
            if (translationComplete === true) {
                translationComplete = false;
                index--;
                if (index == -1) {
                    index = amount - 1;
                }
                var outerIndex = (index) % amount;    // amount : 5
                console.log("outerIndex:   " + outerIndex);
                console.log("index:   " + index);
                for (var i = 0; i < amount; i++) {
                    var slide = document.getElementsByClassName("slide")[i];
                    slide.style.opacity = '1';
                    slide.style.transform = 'translateX(' + (currTransl[i] + moveOffset) + 'px)';
                    currTransl[i] = currTransl[i] + moveOffset;
                }
                var outerSlide = document.getElementsByClassName("slide")[outerIndex];
                console.log(' translateX -> translateX(' + (currTransl[outerIndex] - (moveOffset * amount)) + 'px)');
                outerSlide.style.transform = 'translateX(' + (currTransl[outerIndex] - (moveOffset * amount)) + 'px)';
                outerSlide.style.opacity = '0';
                console.log("currTransl[outerIndex] : " + currTransl[outerIndex] + "   moveOffset:  " + moveOffset);
                currTransl[outerIndex] = currTransl[outerIndex] - moveOffset * (amount);
                console.log("currTransl[outerIndex] : " + currTransl[outerIndex] + "   moveOffset:  " + moveOffset);
            }
        }

        function next() {
            if (translationComplete === true) {
                translationComplete = false;
                var outerIndex = (index) % amount;
                index++;
                for (var i = 0; i < amount; i++) {
                    var slide = document.getElementsByClassName("slide")[i];
                    slide.style.opacity = '1';
                    slide.style.transform = 'translateX(' + (currTransl[i] - moveOffset) + 'px)';
                    currTransl[i] = currTransl[i] - moveOffset;
                }
                var outerSlide = document.getElementsByClassName("slide")[outerIndex];
                outerSlide.style.transform = 'translateX(' + (currTransl[outerIndex] + (moveOffset * amount)) + 'px)';
                outerSlide.style.opacity = '0';
                currTransl[outerIndex] = currTransl[outerIndex] + moveOffset * (amount);
            }
        }
    </script>





    <hr>

    <style>
        button {
            padding: 10px;
        }
    </style>
    <button onclick="pre_2()">pre-2</button>
    <button onclick="insert()">insert</button>
    <script>
        var my_index = 0
        function pre_2() {
            // document.getElementById('carousel').insertBefore(document.getElementById('carousel').children[4], document.getElementById('carousel').children[0]);
            let slidesss = document.getElementsByClassName("slide");
            for (var i = 0; i < slidesss.length; i++) {
                var slide = slidesss[i];
                slide.style.opacity = '1';
                console.log(slide.style.transform);
                slide.style.transform ='translateX(' + (my_index * 500) + 'px)';
                // currTransl[i] = currTransl[i] + moveOffset;
            }
            // document.getElementById("carousel").style.transform ='translateX(' + (my_index * 500) + 'px)';
            my_index++;
        }
        function insert() {
            // document.getElementById('carousel').insertBefore(document.getElementById('carousel').children[4], document.getElementById('carousel').children[0]);
            document.getElementById('carousel').children[4].style.transform =  'translateX(-2000px)';
        }
    </script>


    <style>
    </style>
    <div id="test" style="width: 400px;  height: 400px; background: #000;">
        test
    </div>



    <script>
        document.getElementById("test")
        var aaa = window.getComputedStyle(document.getElementById('test')).width;
        console.log(aaa);   // 400px

        aaa = parseInt(window.getComputedStyle(document.getElementById('test')).width, 10);
        console.log(aaa);   // 400

        document.write(parseInt("10") + "<br>");      // 10
        document.write(parseInt("10.33") + "<br>");   // 10
        document.write(parseInt("34 45 66") + "<br>"); // 34
        document.write(parseInt(" 60 ") + "<br>");     // 60 
        document.write(parseInt("40 years") + "<br>"); // 40 
        document.write(parseInt("He was 40") + "<br>"); // NaN

        document.write(parseInt("10", 10) + "<br>");    // 10
        document.write(parseInt("010") + "<br>");     // 10
        document.write(parseInt("10", 8) + "<br>");  // 8
        document.write(parseInt("0x10") + "<br>");   // 10
        document.write(parseInt("10", 16) + "<br>");  // 16



        // parentDiv.insertBefore(sp1, sp2.nextSibling);  将 sp1 插入到 sp2 之后： 


    </script>





</body>

</html>